<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#1296db" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(0)">
						<view class="page-box">
							<u-table >
								<u-tr>
									<u-th>姓名</u-th>
									<u-th>开始时间</u-th>
									<u-th>时长</u-th>
									<u-th>备注</u-th>
								</u-tr>
								<u-tr v-for="(res, index) in orderList[0]" :key="res._id">
									<u-td>{{userName}}</u-td>
									<u-td>{{res.workTimeStart}}</u-td>
									<u-td>{{res.workDays}}天</u-td>
                                    <u-td class="row" >
                                        <text selectable style="color:#007AFF;" @click="showDetail(res.reason)">详情</text> 
                                        <text selectable style="color:#ff1540; margin-left: 3px;"  @click="delRow(res._id)">删除</text>
                                    </u-td>
								</u-tr>
							</u-table>
							<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2" margin-top='50' margin-bottom='50'></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(1)">
						<view class="page-box">
							<u-table >
								<u-tr>
									<u-th>姓名</u-th>
									<u-th>开始时间</u-th>
									<u-th>时长</u-th>
									<u-th>备注</u-th>
								</u-tr>
                                <u-tr v-for="(item, index) in orderList[1]" :key="item._id">
                                    <u-td>{{userName}}</u-td>
                                    <u-td>{{item.workTimeStart}}</u-td>
                                    <u-td>{{item.workDays}}天</u-td>
                                    <u-td >
                                        <text selectable style="color:#007AFF;" @click="showDetail(item.reason)">详情</text> 
                                    </u-td>
								</u-tr>
							</u-table>
							<u-loadmore  :status="loadStatus[1]" bgColor="#f2f2f2" margin-top='50' margin-bottom='50'></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>

			</swiper>
			<!-- <view class="holiday-btn" type="default" @click="addHoliday">{{swiperCurrent==0?'加班':'调休'}}录入</view> -->
		</view>
		<u-modal v-model="detailShow" title='详情' :mask-close-able="true" :content="detailContent"></u-modal>
		<!-- <u-jk-hans-tabbar :currentIndex="0"></u-jk-hans-tabbar> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderList: [[], []],
			dataList: [],
			list: [
				{ name: '加班' },
				{ name: '调休' },
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
			loadStatus: ['loadmore','loadmore'],     
			detailShow:false,
            detailContent:'',
            delShow:false,
			currentPage:[1,1],
			pageSize:[20,20],
			hasMore:[false,false],
			userName:''
            
		};
	},
	onLoad(e) {
		this._id = e.id;
		this.currentPage=[1,1]
		this.getOrderList(0);
		this.getOrderList(1);
	},
	onShow() {

	},
	computed: {

	},
	methods: {
		//底部导航栏切换回调
		tabChange(index) {
			console.log(index);
		},
		showDetail(content){
			this.detailContent=content
			this.detailShow=true
		},
		delRow(id){
			let that=this
			// this.delShow=true
			uni.showModal({
				title: '提示',
				content: '确定删除此记录吗？',
				icon:'warning',
				confirmColor: '#f55850',
				success: function (res) {
					if (res.confirm) {
						that.request('business/work/del', {id:id}).then(res => {
							if(res.code==0){
								uni.showModal({
									showCancel: false,
									content: res.msg
								})
								that.currentPage=[1,1]
								that.getOrderList(0)
							}else{
								uni.showModal({
									showCancel: false,
									content: res.msg
								})
							}
						})
					} else if (res.cancel) {
					}
				}
			});
			console.log(id)
		},
		addHoliday(){
			uni.navigateTo({
				url: './add'
			})
		},
		reachBottom(idx) {
			if(this.hasMore[idx]){
				this.currentPage[idx]++
				this.getOrderList(idx)
			}
		},
		// 页面数据
		getOrderList(idx) {
			this.$set(this.loadStatus,idx, 'loading')
			//type  0:调休 ，1:加班",
			this.request('business/work/getWorkList', {page:this.currentPage[idx],size:this.pageSize[idx], type:idx==0?'1':'0',uid:this._id}).then(res => {
				if(res.code==0){
					this.userName=res.userName
					this.hasMore[idx]=res.hasMore
					if(res.hasMore==false) this.$set(this.loadStatus,idx, 'nomore')
					else this.$set(this.loadStatus,idx, 'loadmore')
					
					if(this.currentPage[idx]!=1) this.orderList[idx].push(...res.data)
					else this.$set(this.orderList,idx,res.data)
				}else{
					uni.showModal({
						showCancel: false,
						content: res.msg
					})
				}
			})
		},

		// tab栏切换
		change(index) {
			this.currentPage=[1,1]
			this.swiperCurrent = index;
			this.getOrderList(index);
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */

</style>

<style lang="scss" scoped>
/* #ifdef H5 */
.row{
	display: block;
}	
/* #endif */

.row{
	/deep/ .u-td{
		flex-direction: row;
	}
}	


.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
.holiday-btn {
	height: 120rpx;
	width: 120rpx;
	position: fixed;
	right: 20rpx;
	bottom: calc(var(--window-bottom) + 160rpx) ;
	background-color: #fff;
	z-index: 1000000;
	padding: 20rpx;
	padding-left: 26rpx;
	font-size: 15px;
	border-radius: 50%;
	border:1px solid #c1c1c1;
	line-height: inherit;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
</style>
